<template>
	<view>
		<view class="u-skeleton">
			<view class="share-con">
				<view class="money-con">
					<view class="money">
						<text class="mo">{{ balance }}</text>
						<text class="yu">元</text>
					</view>
					<view class="share-btn" @click="onShare">分享好友</view>
				</view>
			</view>
			<view class="invite-con">
				<view class="title">— 我的邀请 —</view>
				<view class="invite" ref="share">
					<!-- <view :class="['item', 'move']" v-for="(item, index) in 10" :key="index">
						<text>好友139****7766</text>
						<text>50元</text>
						<text>2020-09-09</text>
					</view> -->
					<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="2200" :vertical="true" :circular="true" :disable-touch="true">
						<swiper-item v-for="(list, index) in recommendList" :key="index">
							<!-- <view class="swiper-item uni-bg-red">A</view> -->
							<view :class="['item']" v-for="item in list" :key="item.id">
								<text>好友{{ item.mobile.slice(0, 3) + "****" + item.mobile.slice(-4) }}</text>
								<text>{{ parseInt(item.balance) }}元</text>
								<text>{{ item.create_time.split(' ')[0] }}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="notice-con">
				<view class="title">— 注意事项 —</view>
				<view class="info">
					<view>活动说明：</view>
					<view style="line-height: 50rpx;">邀请好友下载注册登陆app即可获得奖励</view>
					<view style="line-height: 50rpx;margin-top: 10rpx;">奖励内容：</view>
					<view>50元系统余额，可用于系统内消费</view>
					<view style="line-height: 40rpx;margin-top: 10rpx;">本活动为奖励分享者的激励政策，可能随着系统更新而产细微变化不做另行通知。</view>
					<view style="margin-top: 10rpx;">1、通过活动获取的余额为系统虚拟金额，只可用于系统内消费，不可折现；</view>
					<view style="margin-top: 10rpx;">2、通过恶意手段获取余额，平台有权直接取消活动资格且回收已获得余额奖励；</view>
					<view style="margin-top: 10rpx;">3、如有其他疑问请至“我的-客服中心” 联系平台客服。</view>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	import appShare, { closeShare } from "@/plugins/share/index.js"
	import { recommendList } from '@/api/userApi.js'
	export default {
		data() {
			return {
				loading: false, // 是否显示骨架屏组件
				userId: '',
				balance: '',
				recommendList: []
			}
		},
		onLoad() {
			// console.log(uni.getStorageSync('user'))
			this.userId = uni.getStorageSync('user').member.id
			console.log(this.userId)
			this._recommendList()
		},
		methods: {
			async _recommendList() {
				const res = await recommendList()
				this.balance = res.data.data.balance
				let list = res.data.data.list.filter(item => item.status != 0)
				this.recommendList = this.$utils.splitArr(list, 3)
				console.log(this.recommendList)
			},
			onShare() {
				let shareData = {
					type: 0,
					// shareUrl:"https://weixin.arapp.net/appDownload/#/pages/index/register?id=" + this.userId,
					shareUrl:"https://api.arapp.net/client/visitor/authByWeb?id=" + this.userId,
					shareTitle: "安瑞律师APP,您身边的法律顾问",
					shareContent:"严谨专业高效的真实律师团队服务",
					shareImg:"https://oss.arapp.net/defaut-img/logo.png",
					// appId : "wxd0e0881530ee4444", // 默认不传type的时候，必须传appId和appPath才会显示小程序图标
					// appPath : "pages/home/home",
					// appWebUrl : "https://kemean.com/",
				};
				// 调用
				let shareObj = appShare(shareData,res => {
					console.log("分享成功回调",res);
					// 分享成功后关闭弹窗
					// 第一种关闭弹窗的方式
					closeShare();
				});
			},
		},
		mounted() {
			// #ifdef APP-PLUS
			const query = uni.createSelectorQuery().in(this)
			query.selectAll('.item').fields({
				id: true,
				dataset: true,
				context: true
			}, data => {
				console.log(data)
			}).exec()
			// #endif
			// #ifdef H5
			// console.log(this.$refs.share.$children)
			let items = this.$refs.share.$children
			console.log(items)
			// #endif
		}
	}
</script>

<style lang="scss">
	page {
		background: #3852cb;
	}
	.share-con {
		height: 735rpx;
		background: url(../../static/images/share_friend.jpg) no-repeat top center;
		background-size: 100%;
		position: relative;
		.money-con {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 78%;
			left: 50%;
			transform: translate(-50%, -50%);
			.money {
				margin-bottom: 44rpx;
				.mo {
					font-size: 100rpx;
					color: #eb6657;
				}
				.yu {
					font-size: 30rpx;
					color: #eb6657;
				}
			}
			.share-btn {
				width: 414rpx;
				height: 90rpx;
				background-color: #fcfcf9;
				box-shadow: 0 10rpx 51rpx 0 rgba(0, 0, 0, 0.2);
				border-radius: 45rpx;
				font-size: 34rpx;
				color: #e44462;
				display: flex;
				justify-content: center;
				align-items: center;
				&:active {
					background: #f8f8f8;
				}
			}
		}
	}
	.invite-con {
		margin-top: 70rpx;
		padding: 0 30rpx;
		.title {
			font-size: 32rpx;
			color: #edda28;
			text-align: center; 
		}
		.invite {
			height: 229rpx;
			margin-top: 26rpx;
			background-color: #647afb;
			border-radius: 10rpx;
			color: #fcfcf9;
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
			overflow: hidden;
			.item {
				display: flex;
				justify-content: space-around;
				height: 40rpx;
				margin-top: 28rpx;
			}
			.move {
				animation: move 2.2s 0.5s;
			}
		}
	}
	.notice-con {
		margin-top: 70rpx;
		margin-bottom: 36rpx;
		padding: 0 30rpx;
		color: #dde1f7;
		font-size: 28rpx;
		.title {
			font-size: 32rpx;
			color: #edda28;
			text-align: center; 
		}
		.info {
			margin-top: 26rpx;
			background-color: #647afb;
			border-radius: 10rpx;
			padding: 28rpx;
		}
	}
	@keyframes move {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-66rpx);
		}
	}
</style>
